<template>
	<view class="profile-container">
		<!-- 基本信息 -->
		<view class="info-section">
			<view class="section-title">基本信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">学号</text>
					<text class="value">{{userInfo.sSid}}</text>
				</view>
				<view class="info-item">
					<text class="label">姓名</text>
					<text class="value">{{userInfo.sName}}</text>
				</view>
				<view class="info-item">
					<text class="label">专业</text>
					<text class="value">{{userInfo.sSpecialized}}</text>
				</view>
				<view class="info-item">
					<text class="label">年级</text>
					<text class="value">{{userInfo.sGrade}}</text>
				</view>
				<view class="info-item">
					<text class="label">班级</text>
					<text class="value">{{userInfo.sClass}}</text>
				</view>
				<view class="info-item">
									<text class="label">入学成绩</text>
									<text class="value">{{userInfo.sMgrades || "请输入入学成绩"}}</text>
								</view>
			</view>
		</view>
		
		<!-- 其他信息 -->
		<view class="info-section">
			<view class="section-title">其他信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">生日</text>
					<picker mode="date" :value="userInfo.sBirthday" @change="handleBirthdayChange">
						<text class="value">{{userInfo.sBirthday || '请选择'}}</text>
					</picker>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="info-item">
					<text class="label">邮箱</text>
					<input type="text" v-model="userInfo.sEmail" placeholder="请输入邮箱" />
				</view>
				<view class="info-item">
					<text class="label">电话</text>
					<input type="number" v-model="userInfo.sPhone" placeholder="请输入电话" />
				</view>
				<view class="info-item">
					<text class="label">监护人</text>
					<input type="text" v-model="userInfo.sPname" placeholder="请输入监护人姓名" />
				</view>
				<view class="info-item address-item">
					<text class="label">家庭地址</text>
					<textarea 
						v-model="userInfo.sAddress" 
						placeholder="请输入家庭地址"
						:auto-height="true"
						class="address-input"
					/>
				</view>
			</view>
		</view>
		
		<!-- 按钮组 -->
		<view class="btn-group">
			<button class="save-btn" @click="updateStu">保存修改</button>
		</view>
	</view>
</template>
<script>
import { reactive, toRefs } from 'vue';
import { updateIfo } from '@/api/student.js';

export default {
  setup() {
    const state = reactive({
      newstuInfo: {},
      userInfo: uni.getStorageSync("student") || {},
      stuInfo: {
        ssid: '',
        sbirthday: '',
        semail: '',
        sphone: '',
        saddress: '',
        spname: '',
        smgrades: ''
      }
    });
    
    const handleBirthdayChange = (e) => {
      state.userInfo.sBirthday = e.detail.value;
    };
    
    function updateStu() {
      // 从userInfo复制所有属性到stuInfo
      Object.assign(state.stuInfo, {
        ssid: state.userInfo.sSid,
        sname: state.userInfo.sName,
        sphone: state.userInfo.sPhone,
        saddress: state.userInfo.sAddress,
        spname: state.userInfo.sPname,
        smgrades: state.userInfo.sMgrades,
        sbirthday: state.userInfo.sBirthday,
        semail: state.userInfo.sEmail,
        sclass: state.userInfo.sClass,
        sspecialized: state.userInfo.sSpecialized,
        sgrade: state.userInfo.sGrade
      });
      
      updateIfo(state.stuInfo).then(res => {
        if (res.code == 1) {
          uni.showToast({
            title: '修改成功',
            icon: 'success',
            duration: 2000
          });
          
          // 合并更新后的信息回userInfo
          Object.assign(state.userInfo, state.stuInfo);
          
          // 保存到本地存储
          uni.setStorageSync("student", state.userInfo);
        }
      });
    }
    
    return {
      ...toRefs(state),
      handleBirthdayChange,
      updateStu
    }
  },
  onReady() {
    // 获取组件引用
    this.passwordPopupRef = this.$refs.passwordPopup;
  }
}
</script>


<style lang="scss">
page {
	background-color: #f5f5f5;
}

.profile-container {
	padding: 20rpx;
	
	.info-section {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		
		.section-title {
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 30rpx;
			background-color: #f8f8f8;
		}
		
		.info-list {
			.info-item {
				display: flex;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;
				
				&:last-child {
					border-bottom: none;
				}
				
				.label {
					width: 160rpx;
					font-size: 28rpx;
					color: #333;
				}
				
				.value {
					flex: 1;
					font-size: 28rpx;
					color: #666;
				}
				
				input {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}
				
				&.address-item {
					align-items: flex-start;
					
					.address-input {
						flex: 1;
						font-size: 28rpx;
						min-height: 80rpx;
						color: #333;
					}
				}
			}
		}
	}
	
	.btn-group {
		padding: 40rpx 30rpx;
		display: flex;
		gap: 20rpx;
		
		.pwd-btn, .save-btn {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
		}
		
		.pwd-btn {
			background-color: #fff;
			color: #119790;
			border: 2rpx solid #119790;
		}
		
		.save-btn {
			background-color: #119790;
			color: #fff;
			
			&:active {
				background-color: darken(#119790, 5%);
			}
		}
	}
}

// 弹出层样式
.popup-content {
	width: 600rpx;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	
	.popup-title {
		font-size: 32rpx;
		color: #333;
		text-align: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.popup-form {
		padding: 30rpx;
		
		.form-item {
			margin-bottom: 20rpx;
			
			.label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			input {
				width: 100%;
				height: 80rpx;
				border: 1rpx solid #eee;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	
	.popup-btns {
		display: flex;
		border-top: 1rpx solid #eee;
		
		button {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			border-radius: 0;
			
			&.cancel-btn {
				background-color: #f5f5f5;
				color: #666;
			}
			
			&.confirm-btn {
				background-color: #119790;
				color: #fff;
				
				&:active {
					background-color: darken(#119790, 5%);
				}
			}
		}
	}
}
</style> 